import React, { useState, memo, useEffect } from 'react';
import { SearchBar, ActivityIndicator } from 'antd-mobile';
import { useLocation, Location } from 'umi';

import './index.less';
import { useHttpHook, useObserverHook, useLazyImgHook } from '@/hooks';
import { ShowLoading } from '@/components';
import CommonEnums from '@/enums';

type HttpType = {
  houses: () => [];
  houseLoading: boolean;
};

const search: React.FC = (props) => {
  const { query: urlQuery }: Location = useLocation();
  const [houseName, setHouseName] = useState<string>('');
  const [housesLists, setHousesLists] = useState<any>([]);
  const [showLoading, setShowLoading] = useState(true);
  const [houseSubmitName, setHouseSubmitName] = useState('');
  const [query, setQuery] = useState({
    pageSize: 8,
    pageNum: 1,
  });
  const handelSeach = (v: string) => {
    setHouseName(v);
  };
  const handelCancel = () => {
    setHouseName('');
    setHouseSubmitName('');
  };
  const handelSubmit = (v: string) => {
    setHouseSubmitName(v);
    setHousesLists([]);
    setQuery({
      pageSize: 8,
      pageNum: 1,
      ...urlQuery,
    });
  };

  const [houses, houseLoading] = useHttpHook({
    url: '/house/search',
    method: 'POST',
    body: {
      ...query,
      ...urlQuery,
      houseName,
    },
    watch: [query.pageNum, houseSubmitName],
  });

  useObserverHook(
    `#${CommonEnums.LOADING_ID}`,
    (entires) => {
      if (!houseLoading && entires[0].isIntersecting) {
        setQuery({
          ...query,
          pageNum: query.pageNum + 1,
        });
      }
    },
    null,
  );

  useLazyImgHook('.item-img', (entires) => {}, null);

  useEffect(() => {
    if (!houseLoading && houses) {
      if (houses.length) {
        const data = [...housesLists, ...houses];
        setHousesLists(data);
        if (houses.length < query.pageSize) {
          setShowLoading(false);
        }
      } else {
        setShowLoading(false);
      }
    }
  }, [houseLoading]);

  return (
    <div className="search-page">
      {/* 顶部搜索栏目 */}
      <SearchBar
        placeholder="搜索民宿"
        value={houseName}
        onChange={handelSeach}
        onCancel={handelCancel}
        onClear={handelCancel}
        onSubmit={handelSubmit}
      />
      {/* 搜索结果 */}
      {!housesLists.length ? (
        <ActivityIndicator toast />
      ) : (
        <div className="result">
          {houses.map(
            (
              item: {
                id: string | number | null | undefined;
                img: string | undefined;
                title: React.ReactNode;
                price: React.ReactNode;
              },
              index: string | number | null | undefined,
            ) => (
              <div className="item" key={index}>
                <img
                  src={require('@/assets/images/lazy.gif')}
                  data-src={item.img}
                  className="item-img"
                  alt=""
                />
                <div className="item-right">
                  <div className="title">{item.title}</div>
                  <div className="price">{item.price}</div>
                </div>
              </div>
            ),
          )}
          <ShowLoading showLoading={showLoading} />
        </div>
      )}
    </div>
  );
};

export default memo(search);
